<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<style>
  /* adjust body when menu is open */
.navbar-happyhome{
	background-image: url("resources/images/nav.jpg");
    background-repeat: repeat-x;
}
.nav>li>a:hover{
	background-image: url("resources/images/nav_hover.jpg");
    background-repeat: repeat-x;
}

body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 5px 0 0 5px;
    width: 40px;
    height: 40px;
    padding: 5px 5px 0px 5px;
    border: 1px solid #fff;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: absolute;
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:1039px) { 

  .navbar-toggle{
  	display: block !important;
  }
  
  #slide-nav .container {
      margin: 0;
      padding: 0!important;
  }
  #slide-nav .navbar-header {
      margin: 0 auto;
      padding: 0 5px;
  }
  #slide-nav .navbar.slide-active {
      position: absolute;
      width: 80%;
      top: -1px;
      z-index: 1000;
  }
  #slide-nav #slidemenu {
      background: #f7f7f7;
      left: -100%;
      width: 80%;
      min-width: 0;
      position: absolute;
      padding-left: 0;
      z-index: 2;
      top: 0px;
      margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav {
      min-width: 0;
      width: 100%;
      margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
      min-width: 0;
      width: 80%;
      white-space: normal;
  }
  #slide-nav {
      border-top: 0
  }
  #slide-nav.navbar-inverse #slidemenu {
      background: #333
  }
  /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
  #slide-nav #navbar-height-col {
      position: fixed;
      top: 0;
      height: 100%;
      width: 80%;
      left: -80%;
      background: #eee;
  }
  #slide-nav.navbar-inverse #navbar-height-col {
      background: #333;
      z-index: 1;
      border: 0;
  }
  #slide-nav .navbar-form {
      width: 100%;
      margin: 8px 0;
      text-align: center;
      overflow: hidden;
      /*fast clearfixer*/
  }
  #slide-nav .navbar-form .form-control {
      text-align: center
  }
  #slide-nav .navbar-form .btn {
      width: 100%
  }
}
@media (min-width:768px) { 
  #page-content {
      left: 0!important
  }
  .navbar.navbar-fixed-top.slide-active {
      position: fixed
  }
  .navbar-header {
      left: 0!important
  }
}
 </style>

<div class="navbar navbar-happyhome navbar-fixed-top" role="navigation" id="slide-nav">
  <div class="container">
  		<div class="navbar-collapse invisible-tablet-mobile">
	      	<ul class="nav navbar-nav">
	      		<li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="${pageContext.request.contextPath}" style="height: 70px;">Home</a>
	            </li>
	            <li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="${pageContext.request.contextPath}/housesInHappyHomes">Houses in HappyHomes</a>
	            </li>
	            <li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="#">Rooms District 1</a>
	            </li>
	            <li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="#">Rooms Tan Binh District</a>
	            </li>
	            <li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="#">Rooms District 3</a>
	            </li>
	            <li class="col-lg-2 col-md-2 col-sm-2 col-xs-6 navbar-button">
	              <a href="#" style="height: 70px;">Contacts</a>
	            </li>
	      	</ul>
	    </div><!-- /.navbar-collapse -->
	    
	   	<div class="navbar-header invisible-medium-devices">
	    	<a class="navbar-toggle" id="top-navbar-toggle"> 
			    <span class="sr-only">Toggle navigation</span>
			    <span class="icon-bar"></span>
			    <span class="icon-bar"></span>
			    <span class="icon-bar"></span>
	     	</a>
	   	</div>
   		<div id="slidemenu" class="invisible-medium-devices">
		    <ul class="nav navbar-nav">
		      	<li>
		        	<a href="#">Apartment District 2</a>
		      	</li>
		      	<li>
		        	<a href="#">Apartment District 7</a>
		      	</li>
		      	<li>
		        	<a href="#">Apartment District 1</a>
		      	</li>
		      	<li>
		        	<a href="#">Apartment Binh Thanh District</a>
		      	</li>
		      	<li>
		        	<a href="#">Houses District 2</a>
		      	</li>
		      	<li>
		        	<a href="#">Houses District 7</a>
		      	</li>
		      	<li>
		        	<a href="#">Houses District 1</a>
		      	</li>
		    </ul>
	   </div>
  </div>
 </div>
 